<template>
    <div id="manage-student">
        <div class="manage-class-search">
            <el-form :inline="true" class="demo-form-inline clearfix" :model="formList">
                <el-form-item label="用户信息 ：">
                   <el-input v-model="formList.info" placeholder="请输入用户名称" ></el-input>
                </el-form-item>
                <el-form-item >
                   <div class="button-style" @click="search">搜 索</div>
                </el-form-item>
                <el-form-item style="float: right;" v-if="classuserId != undefined">
                    <div class="button-style" @click="addFn">添 加</div>
                    <div class="button-style" @click="deleteAll">批量删除</div>
                    <div class="button-style" @click="Import">批量导入</div>
                    <!-- <a  href="/tes/user/model/download/student">&nbsp;Excel模板  <i class="iconfont icon-tubiaozhizuo-"></i></a> -->
                    <a @click="downExcel" style="cursor: pointer;">&nbsp;学生数据下载  <i class="iconfont icon-tubiaozhizuo-"></i></a>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table  :data="tableData" ref="multipleTable"  style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="100" v-if="classuserId != undefined"></el-table-column>
                <el-table-column prop="name" label="用户名称"></el-table-column>
                <el-table-column prop="userNumber" label="学号"></el-table-column>
                <el-table-column prop="sexName" label="性别"></el-table-column>
                <el-table-column prop="telephoneNumber" label="联系方式"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="repeatFn(scope.row.id,scope.row.userNumber,scope.row.name,scope.row.email, scope.row.telephoneNumber, scope.row.sex)" type="text" size="small" v-if="classuserId != undefined ">修改</el-button>
                        <el-button type="text" size="small" @click="initCode(scope.row.id)">初始密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
        <el-dialog :close-on-click-modal="false" title="添加用户" :visible.sync="dialogable" width="550px" @close="closeDialog" >
            <el-form ref="addform" :inline="true"  :model="addform"  :rules="rules" label-width="90px">
                <!-- <el-form-item label="角色 :"  prop="role" style="width:100%;">
                    <el-radio-group  v-model="addform.role" placeholder="请选择角色" :disabled="disables">
                        <el-radio label="1">学生</el-radio>
                        <el-radio label="2">教师</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item label="学号  :" prop="number" >
                    <el-input v-model="addform.number"  placeholder="请输入学号" @input="getinfo('addform')"></el-input>
                </el-form-item>
                <el-form-item label="学生名称 :" prop="name" >
                    <el-input v-model="addform.name" maxlength="10" placeholder="请输入学生名称" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="联系方式 :"  prop="telephoneNumber">
                    <el-input v-model="addform.telephoneNumber" maxlength="11"  placeholder="请输入联系方式" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="邮箱 :"  prop="email">
                    <el-input v-model="addform.email" maxlength="50" placeholder="请输入邮箱" :disabled="disables"></el-input>
                </el-form-item>
                <el-form-item label="性别 :" prop="sex" style="width:100%;">
                    <!-- <el-select v-model="addform.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select> -->
                    <el-radio-group v-model="addform.sex" placeholder="请选择性别" :disabled="disables">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="密 码 :" prop="code">
                    <el-input v-model="addform.code" maxlength="14" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码 :" prop="codepass">
                    <el-input   v-model="addform.codepass"  maxlength="14"  type="password" placeholder="请输入确认密码"></el-input>
                </el-form-item> -->
            </el-form>
            <div class="btn-center" style="text-align: center;">
                <button class="button-style" @click="submit('addform')" >保 存</button>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="修改用户信息" :visible.sync="dialogRepeat" width="550px">
            <el-form ref="addform" :inline="true"  :model="addform"  :rules="rules">
                <el-form-item label="学 号 :" >
                    <el-input v-model="addform.number"  placeholder="请输入学号" :disabled="true" ></el-input>
                </el-form-item>
                <el-form-item label="学生名称 :"  >
                    <el-input v-model="addform.name" maxlength="10" placeholder="请输入学生名称"></el-input>
                </el-form-item>
                <el-form-item label="邮 箱 :"   >
                    <el-input v-model="addform.email" maxlength="50" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="联系方式 :" >
                    <el-input v-model="addform.telephoneNumber" maxlength="11"  placeholder="请输入联系方式"></el-input>
                </el-form-item>
                <el-form-item label="性 别 :" >
                    <!-- <el-select v-model="addform.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select> -->
                    <el-radio-group  v-model="addform.sex" placeholder="请选择性别">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="btn-center" style="text-align: center;">
                <button class="button-style" @click="Save()" >保 存</button>
            </div>
        </el-dialog>
        <!-- 添加弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-history-tips" title="提示" :visible.sync="dialogHistoryTips" width="490px">
            <div class="dialog-content">
                <div class="content-box">
                    <p v-for="item in historyTipsInfo">{{ item }}，确定添加吗？</p>
                </div>
            </div>
            <span slot="footer" class="footer">
                <el-button class="button-style" @click="HistoryTipImport">确认</el-button>
                <el-button class="button-style" @click="HistoryTipUnImport">取消</el-button>
            </span>
        </el-dialog>
        <!-- 批量的导入弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-history-tips" title="提示" :visible.sync="dialogExcel" width="490px">
            <div class="dialog-content">
                <div class="content-box">
                    <p v-for="item in historyTipsInfo2">{{ item }}</p>
                </div>
               <div class="content-notation">

                    <el-radio v-model="historyImportRadio" label="1">继续添加，重复学生从原班级移除。</el-radio>
                    <el-radio v-model="historyImportRadio" label="2">不添加，重复学生在原班级保留。</el-radio>
                </div>
            </div>
            <span slot="footer" class="footer">
                <el-button class="button-style" @click="HistoryTipImport2">确认</el-button>
                <el-button class="button-style" @click="HistoryTipUnImport2">取消</el-button>
            </span>
        </el-dialog>
        <!-- 批量的弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-excel" title="批量导入" :visible.sync="Excelable" width="490px">
            <div class="dialog-content">
                <div class="excel-btn-box">
                    <el-button class="button-style">上传Excel<input id="excel-file" type="file" @change="GetFile" /></el-button>
                    <a   href="/tes/user/model/download/student"  style="cursor: pointer;">&nbsp;学生信息模板.xls  <i class="iconfont icon-tubiaozhizuo-"></i></a>
                </div>

                <p v-if="dialogExcelFile">{{ dialogExcelFile }} <i class="iconfont icon-shanchu" @click="ExcelDelete"></i></p>
             </div>
             <span slot="footer" class="dialog-footer" style="text-align:center">
                <el-button class="button-style" @click="ExcelSave" >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            // 密码验证
            // var validatePass = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('请输入密码'))
            //     } else if(value !== ''){
            //         var reg=/^[a-zA-Z0-9]{6,14}$/;
            //         if(!reg.test(value)){
            //             callback(new Error('请输入6-14位数字或中英文字符'))
            //         }
            //          if (this.addform.codepass !== '') {
            //             this.$refs.addform.validateField('codepass')
            //         }
            //     }
            //     callback()
            // }
			// var validatePass2 = (rule, value, callback) => {
			// 	if (value === '') {
			// 		callback(new Error('请再次输入密码'))
            //     } else if (value !== ''){
            //         var reg=/^[a-zA-Z0-9]{6,14}$/;
            //         if(!reg.test(value)){
            //             callback(new Error('请输入6-14位数字或中英文字符'))
            //         }
            //         if (value !== this.addform.code) {
			// 		    callback(new Error('两次输入密码不一致!'))
            //         }
            //     }
            //     callback()
            // }
            return {
                //修改id
                repeadId:'',
                //班级id
                ClassId:'',
                //获取课程id
                courseId:'',
                //学生信息
                formList:{
                    info:'',
                },
                //修改弹窗
                dialogRepeat: false,
                //添加弹窗
                dialogExcel: false,
                //100105后台提示弹窗
                dialogHistoryTips: false,
                //100105 批量导入
                Excelable: false,
                 // 历史提示信息
                historyTipsInfo: [],
                historyTipsInfo2: [],
                 // 导入不导入radio
                historyImportRadio: '1',
                // 用户对错误提示作出的决定 true：继续导入 ；false：过滤 ；null：没有作出决定
                errorFlag: '',
                 // Excel导入文件名称
                dialogExcelFileName: '',
                dialogExcelFile: '',
                tableData: [],
                // 页数
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                // 弹窗
                dialogable:false,
                // 全选
                multipleSelection: [],
                addform: {
                    email: '',
                    name: '',
                    number: '',
                    telephoneNumber: '',
                    sex: '1',
                    role: '1',
                    // code: '',
                    // codepass: ''
                },
                // 表单验证规则
                rules:{
                    name:[
                        { required: true, message: '请输入学生名称', trigger: 'blur' },
                    ],
                    number:[
                        { required: true, message: '请输入学号', trigger: 'blur' },
                    ]
                },
                //返显学号不可点击
                disables: false,

                // 判断是否是自然班级
                classuserId: ''

            }
        },
        created () {
            //接收班级id
            this.ClassId=this.$route.query.id
            //获取课程id
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/tes/course/class/'+self.ClassId+'/student/page?pageNum='+self.currentPage +'&pageSize='+self.pagesize +'&userInfo='+self.formList.info).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.tableData = res.data.content
                       self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                })
                self.$http.get('/tes/course/class/'+self.ClassId+'/flag').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                       self.classuserId = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //下载excel
            downExcel(){
                let self = this
                let downloadElement = document.createElement('a');
                downloadElement.style.display = 'none';
                downloadElement.href = '/tes/user/model/download/studentInfo?classId='+this.ClassId+'&showDataFlag='+true
                // downloadElement.download = fileName; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
            },
            //获取班级信息详情
            getinfo(addform){
                let self = this
                self.$http.post("/tes/user/student/info?identity=2",{
                    userNumber:self.addform.number
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(res.data){
                            self.addform.name = res.data.name
                            self.addform.telephoneNumber = res.data.telephoneNumber
                            self.addform.email = res.data.email
                            if(typeof(res.data.sex) == undefined){
                                self.addform.sex = 0
                            }else{
                                self.addform.sex = ''+res.data.sex+''
                            }
                            self.$message({
                                message: '自动填充已存在的学生',
                                type: 'warning'
                            })
                            // self.$refs['addform'].clearValidate();
                            self.disables = true

                        }else{
                            self.addform.telephoneNumber = ''
                            self.addform.email = ''
                            self.addform.name = ''
                            self.disables = false
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //修改
            repeatFn(id,userNumber,name,email,telephoneNumber,sexName){
                this.dialogRepeat = true
                this.repeadId = id
                this.addform.number = userNumber
                this.addform.name = name
                this.addform.email = email
                this.addform.telephoneNumber = telephoneNumber
                this.addform.sex = ''+sexName+''
            },
            //修改保存
            Save(){
                 let self = this
                  self.$http.put('/tes/user/'+self.repeadId+'?identity=2',{
                    name:self.addform.name,
                    telephoneNumber:self.addform.telephoneNumber,
                    sex: self.addform.sex == 'undefined' ? '' : self.addform.sex,
                    email:self.addform.email,
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        self.init()
                        self.dialogRepeat = false
                    } else{
                        self.$message.error(res.message)
                    }
                })
             },
            //关闭弹窗
            closeDialog(){
                let self = this
                this.$nextTick(function(){
                    self.$refs.addform.resetFields();
                })
            },
            //计数
            handleChange(value) {
                //console.log(value);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //搜索
            search(){
                this.currentPage = 1
                this.init()
            },
            //添加
            addFn(){
               this.addform.name = ''
               this.addform.number = ''
               this.addform.telephoneNumber = ''
               this.addform.sex = '1'
               this.addform.role = '1'
               this.addform.email = ''
               this.disables = false
               this.dialogable = true
            },
            //保存
            submit(addform){
                let self = this
                self.$refs[addform].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '正在保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/course/'+self.courseId+'/class/'+self.ClassId+'/student?errorFlag=',{
                           id: self.id,//是班级页面带来的id
                           name: self.addform.name,
                           userNumber: self.addform.number,
                           telephoneNumber:self.addform.telephoneNumber,
                           sex:  self.addform.sex == 'undefined' ? '' : self.addform.sex,
                           email:self.addform.email,
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                self.init()
                                self.dialogable=false
                                self.$refs[addform].resetFields()
                                loading.close()
                            }else if(res.code == '100105'){
                                self.historyTipsInfo = res.data
                                self.dialogHistoryTips = true
                                loading.close()

                            } else{
                                loading.close()
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
                this.multipleSelection = valArr
            },
            //删除方法
            commonFn(classId,message){
                let self = this
                self.$confirm(''+message+',确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.post('/tes/course/'+self.courseId+'/class/'+self.ClassId+'/student/batch-delete?errorFlag=true',self.multipleSelection) .then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(err => {
                     console.log(err)
                })
            },
            //批量删除
            deleteAll(){
                let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的内容',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    const loading = self.$loading({
                        lock: true,
                        text: '正在删除中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
					self.$http.post('/tes/course/'+self.courseId+'/class/'+self.ClassId+'/student/batch-delete?errorFlag=',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                            loading.close()
                        }else if(res.code == '501'){
                            self.commonFn(self.multipleSelection,res.message)
                            loading.close()

                        }else{
                            self.$message.error(res.message)
                            loading.close()
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            },
            // 添加2次
            HistoryTipImport() {
                let self = this
                // 调用保存数据函数
               // self.errorFlag = self.historyImportRadio == 1 ? true : false
                 self.$http.post('/tes/course/'+self.courseId+'/class/'+self.ClassId+'/student?errorFlag=true',{
                    id:self.id,//是班级页面带来的id
                    name:self.addform.name,
                    userNumber:self.addform.number,
                    telephoneNumber:self.addform.telephoneNumber,
                    sex:self.addform.sex,
                    email:self.addform.email,
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        self.init()
                        self.historyTipsInfo=false
                        self.dialogHistoryTips=false
                        self.dialogable=false

                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            // 重复提示不导入
            HistoryTipUnImport() {
                let self = this
                // 关闭提示
                self.dialogHistoryTips = false
                // 重置提示信息
                self.historyTipsInfo = []
            },
            //初始化密码
            initCode(id){
                let self = this
                self.$http.put('/tes/user/'+id+'/init-password').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '初始化成功',
                            type: 'success'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            // Excel文件上传
            GetFile($event) {
                let self = this
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(fileType != 'xls' && fileType != "xlsx"){
                    self.$message.error('请上传Excel文件!')
                    return
                }
                self.dialogExcelFileName = $event.target.files[0]
                self.dialogExcelFile = $event.target.files[0].name
                //yx修改
                $event.target.value=''
            },
            //批量导入
            Import(){
                this.Excelable = true
                this.dialogExcelFile = ''
                this.dialogExcelFileName=''
            },
            // Excel文件删除
            ExcelDelete() {
                let self = this
                // 清空数据
                self.dialogExcelFile = ''
                self.dialogExcelFileName=''
            },
            //批量上传
            ExcelSave(){
                let self = this
                if(self.dialogExcelFileName==''){
                    self.$message({
                        message: '请上传模板',
                        type: 'warning'
                    })
                    return
                }
                const loading = this.$loading({
                    lock: true,
                    text: '数据加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData()
                    formData.append('file', self.dialogExcelFileName);
                self.$http.post('/tes/course/'+self.courseId+'/class/'+self.ClassId+'/student/model-import?errorFlag=', formData).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.init()
                        self.Excelable = false
                        loading.close()
                    }else if(res.code == '100105'){
                        self.dialogExcel = true
                        self.historyTipsInfo2 = res.data
                        loading.close()
                    } else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //批量导入的确认
            HistoryTipImport2(){
                 let self = this
                 const loading = this.$loading({
                    lock: true,
                    text: '数据加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                // 调用保存数据函数
                 self.errorFlag = self.historyImportRadio == 1 ? true : false
                 let formData = new FormData()
                    formData.append('file', self.dialogExcelFileName);
                 self.$http.post('/tes/course/'+self.courseId+'/class/'+self.ClassId+'/student/model-import?errorFlag='+self.errorFlag, formData).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.init()
                        self.dialogExcel = false
                        self.Excelable = false
                        loading.close()
                    } else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //批量导入的取消
            HistoryTipUnImport2(){
                 let self = this
                // 关闭提示
               self.dialogExcel = false
                // 重置提示信息
                self.historyTipsInfo2 = []
            }
        }
    }
</script>
<style scoped>
    #manage-student>>>.el-dialog__footer{
        text-align: center !important;
    }
    .el-button--text:hover{
         color: #1277eb;
    }
</style>
<style lang="scss" scoped>

    @import "./../../../styles/layout/color_variables";
    #manage-student{
        .manage-class-search{
            margin: 23px 0 25px;
            height: 32px;
            .button-style{
                width: 90px;
            }
            .el-form-item{
                &:last-child{
                    margin-right: 0;
                }
                .button-style{
                    margin-left: 10px;
                }
            }
        }
        .dialog-add{
            .button-style{
                width: 90px;
            }
            .dialog-footer{
                text-align: center;
            }
        }

        //历史导入提示
        .dialog-history-tips{
            .el-dialog__body{
                padding: 45px 60px 15px;
            }
            .dialog-content{
                p{
                    line-height: 28px;
                    span{
                        color: #385899;
                    }
                }
                .content-box{
                    max-height: 200px;
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        width: 4px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c0c0c0;
                    }
                }
                .content-notation{
                    margin-top: 30px;
                    font-size: 12px;
                    line-height: 20px;
                    color: #1277eb;
                    padding-left: 20%;
                    .el-radio{
                        margin-bottom: 20px;
                    }
                }
            }
            .footer{
                text-align: center
            }
        }
        .el-dialog__footer{
            text-align: center;
            .footer{
                .el-button {
                    width: 90px;
                }
            }
        }
        //elcel导入
        .dialog-excel{
            .excel-btn-box{
                text-align: center;
                margin-top: 15px;
                height: 32px;
                line-height: 32px;
                .button-style{
                    position: relative;
                    width: 110px;
                    // margin-right: 20px;
                    &:hover{
                        span{
                            color: $white;
                        }
                    }
                    #excel-file{
                        position: absolute;
                        width: 100%;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        background:#cc281a;
                        opacity: 0;
                    }
                }
                span{
                    color: #1277eb;
                    cursor: pointer;
                    i{
                        vertical-align: text-top;
                        margin-left: 5px;
                    }
                }
            }
            P{
                margin-top: 25px;
                text-align: center;
                font-size: 14px;
                color: $title-gray;
                i{
                    font-size: 18px;
                    color: #385899;
                    margin-left: 10px;
                }
            }
        }
    }
</style>
